<template>
  <div class="discuss-item" @click="goDetail">
    <div class="head">
      <div class="avatar">
        <n-avatar v-if="discuss.avatar === null || discuss.avatar === ''" round lazy>{{ discuss.author }}</n-avatar>
        <n-avatar v-else round size="small" :src="$getAvatarUrl(discuss.avatar)" lazy></n-avatar>
      </div>
      <div class="base-content">
        <div class="author">
          <div class="name">{{ discuss.author }}</div>
          <div class="create-time">·{{ getTime }}</div>
        </div>
        <div class="title">{{ discuss.title }}</div>
      </div>
    </div>
    <div class="foot">
      <div class="content">
        <n-ellipsis style="width: 100%" :line-clamp="1" :tooltip="false">
          {{ discuss.content }}
        </n-ellipsis>
      </div>
      <div class="tags">
        <el-tag v-for="tag in discuss.tags" :key="tag" class="mx-1" :disable-transitions="false">
          <span class="tag" :class="{ 'active-tag': isChoice(tag) }">{{
            tag.name
          }}</span>
        </el-tag>
      </div>
      <div class="info">
        <div class="base-info">
          <div class="icon">
            <i class="iconfont icon-pinglun"></i>
            <span class="icon-num">评论:</span>
            <span class="icon-num">{{ discuss.commentNum }}</span>
          </div>
          <div class="icon">
            <i class="iconfont icon-dianzan"></i>
            <span class="icon-num">点赞:</span>
            <span class="icon-num">{{ discuss.likeNum }}</span>
          </div>
          <div class="icon">
            <i class="iconfont icon-chakan"></i>
            <span class="icon-num">浏览:</span>
            <span class="icon-num">{{ discuss.viewNum }}</span>
          </div>

          <div class="icon">
            <i class="iconfont icon-shijian"></i>
            <span class="icon-num">发布时间:</span>
            <n-popover trigger="hover">
              <template #trigger>
                <span class="icon-num time">{{ postTime }}</span>
              </template>
              <span class="create-time">{{ discuss.createTime }}</span>
            </n-popover>
          </div>
        </div>
      </div>
    </div>
    <div class="place"></div>
  </div>
</template>

<script>
export default {
  name: "PtojDisucssItem",
  emits: ["changePage"],
  props: {
    discuss: {
      type: Object,
      default: {},
    },
    choiceTag: {
      type: Array,
      default: [],
    },
  },

  data() {
    return {};
  },
  computed: {
    getTime() {
      const time = new Date(this.discuss.createTime);
      return (
        time.getFullYear() + "." + (time.getMonth() + 1) + "." + time.getDate()
      );
    },
    postTime() {
      const nowTime = new Date();
      const discussTime = new Date(this.discuss.createTime);
      const differTime = new Date(nowTime.getTime() - discussTime.getTime());
      if (differTime.getFullYear() !== 1970) {
        if (parseInt(differTime.getFullYear()) - 1970 >= 100) {
          return (parseInt(differTime.getFullYear()) - 1970) / 100 + "世纪前";
        } else {
          return parseInt(differTime.getFullYear()) - 1970 + "年前";
        }
      } else if (nowTime.getMonth() !== discussTime.getMonth()) {
        return differTime.getMonth() + "月前";
      } else if (differTime.getDate() - 1 !== 0) {
        return differTime.getDate() - 1 + "天前";
      } else if (nowTime.getHours() - discussTime.getHours() !== 0) {
        return nowTime.getHours() - discussTime.getHours() + "小时前";
      } else if (differTime.getMinutes() !== 0) {
        return differTime.getMinutes() + "分钟前";
      } else if (differTime.getSeconds() !== 0) {
        return differTime.getSeconds() + "秒前";
      } else {
        return "刚刚发布";
      }
    },
  },
  mounted() { },

  methods: {
    isChoice(tag) {
      if (this.choiceTag.findIndex((item) => item === tag.name) !== -1) {
        return true;
      }
    },
    //跳转到详情页
    goDetail() {
      localStorage.setItem("discussId", this.discuss.id);
      this.$emit("changePage");
    },
  },
};
</script>

<style lang="less" scoped>
.discuss-item {
  width: 100%;
  cursor: pointer;

  .head {
    display: flex;

    .avatar {
      display: flex;
      align-items: center;
    }

    .base-content {
      margin-left: 10px;

      .author {
        display: flex;

        .name {
          max-width: 200px;
          text-decoration-line: none;
          color: #0000008c;
          line-height: 1.25rem;
          font-weight: 400;
          font-size: 0.875rem;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          line-height: 200%;
        }

        .create-time {
          margin-left: 3px;
          font-size: 0.75rem;
          line-height: 230%;
          color: #3c3c4399;
          opacity: 0;
          transition: opacity 0.3s ease-in;
        }
      }

      .title {
        color: rgba(38 38 38, 1);
      }
    }
  }

  .foot {
    padding-left: 2.25rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .content {
      margin-top: 4px;
      color: #262626bf;
      line-height: 1.25rem;
    }

    .tags {
      .el-tag {
        background-color: rgba(255, 255, 255, 1);
        border: none;

        .tag {
          font-size: 0.75rem;
          line-height: 1rem;
          font-weight: 400;
          color: #262626bf;
          height: 24px;
          border-radius: 20px;
          padding: 1px 0.5rem;
          background-color: #000a200d;
          cursor: default;
          margin: 2px 0px 2px 0px;
        }

        .active-tag {
          color: rgba(255, 255, 255, 1);
          background-color: rgba(0, 122, 255, 1);
          border-color: rgba(0, 122, 255, 1);
        }
      }
    }

    .info {
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      -webkit-box-pack: justify;
      justify-content: space-between;
      margin-top: 5px;

      .base-info {
        display: flex;
        align-items: center;

        i {
          font-size: 14px;
        }

        .icon {
          display: flex;
          margin-left: 6px;

          .icon-num {
            color: rgba(60, 60, 67, 0.6);
            margin-left: 5px;
            font-size: 14px;
          }

          .time {
            cursor: default;
          }

          .time:hover {
            color: #18a058;
          }
        }
      }
    }
  }

  .place {
    margin-left: 2.25rem;
    display: flex;
    height: 0.25rem;
    border-bottom: 1px solid #ebebeb;
  }
}

.discuss-item:hover {
  .create-time {
    transition: opacity 0.5s ease-in;
    opacity: 1 !important;
  }
}
</style>
